/*
 * @Author: liu wang wang
 * @Date: 2020-07-10 10:10:18
 * @LastEditTime: 2020-07-17 17:40:22
 * @LastEditors: liu wang wang
 * @Description: 表单类
 * @FilePath: \st-sdk-js\src\components\Form.ts
 */

import Common from '../utils/Common';
import { CheckBoxData, CheckBox, KaisaAjaxResponse } from '../../types';
import api from '../api';
import { transformCheckbox } from '../utils/formdata';

class Form extends Common {
    protected TypeList:any
    constructor() {
        super();
        api.getTypeList({
            success:  (res: KaisaAjaxResponse) => {
                this.TypeList = res.data;
            }
        });
    }
    protected getCheckBoxEle({ list }: CheckBoxData): HTMLElement {
        const CheckBoxDiv = this.getDivofFlex();
        list.map(({ value, id, text, name, checked }: CheckBox) => {
            let checkBoxItem = this.getCheckBox({
                value, id, text, name, checked
            });
            this.setStyle(checkBoxItem, 'margin-right:20px;margin-bottom:10px;');
            CheckBoxDiv.appendChild(checkBoxItem);
        });
        this.setStyle(CheckBoxDiv, 'flex-wrap: wrap;max-width:375px;');
        return CheckBoxDiv;
    }
    // 版本名称
    protected getVersionName(): HTMLElement {
        const versionNameBox = this.getDivofFlex();
        const nameTip = this.getTipEle('版本名称：');
        const versionNameInput = this.getInput({
            type: 'text',
            name: 'versionName',
            id: 'version-name'
        })
        const versionNameInputStyle = `
            width:220px;
            height:28px;
            border-radius:2px;
            border:1px solid rgba(203,203,203,1);
            outline:none;
            text-indent:10px;
            box-sizing:border-box;
        `;
        this.setStyle(versionNameInput, versionNameInputStyle);
        versionNameBox.appendChild(nameTip);
        versionNameBox.appendChild(versionNameInput);
        return versionNameBox;
    }

    // 职业数量
    protected getJobNumEle(): HTMLElement {
        const nameTip: HTMLElement = this.getTipEle('职业数量：');
        const jobNumBox: HTMLElement = this.getDivofFlex();
        const selectOfJob: HTMLElement = this.getSelect({
            name: 'occupationNum',
            id: 'job-number',
            list: this.TypeList.occupationNumber
        })
        const selectOfJobStyle: string = `
                border:1px solid rgba(203,203,203,1);
                line-height:28px;
                height:28px;
                border-radius:2px;
                width:220px;
                font-size:14px;
            `;
        this.setStyle(selectOfJob, selectOfJobStyle);
        jobNumBox.appendChild(nameTip);
        jobNumBox.appendChild(selectOfJob);
        return jobNumBox;
    }
    // 版本类型
    protected getVersionType(): HTMLElement {
        const nameTip: HTMLElement = this.getTipEle('版本类型：');
        const versionTypeBox: HTMLElement = this.getDivofFlex();
        const selectOfVersionType: HTMLElement = this.getSelect({
            name: 'versionType',
            id: 'version-type',
            list: this.TypeList.versionType
        })
        const selectOfVersionTypeStyle: string = `
                border:1px solid rgba(203,203,203,1);
                line-height:28px;
                height:28px;
                border-radius:2px;
                width:220px;
                font-size:14px;
            `;
        this.setStyle(selectOfVersionType, selectOfVersionTypeStyle);
        versionTypeBox.appendChild(nameTip);
        versionTypeBox.appendChild(selectOfVersionType);
        return versionTypeBox;
    }
    // 终端类型
    protected getTerminalType(): HTMLElement {
        const nameTip = this.getTipEle('终端类型：');
        const terminalTypeBox = this.getDivofFlex();
        const checkBox = this.getCheckBoxEle({
            list:transformCheckbox(this.TypeList.terminalType,'terminalType')
        });
        this.setStyle(terminalTypeBox, 'align-items:start;');
        terminalTypeBox.appendChild(nameTip);
        terminalTypeBox.appendChild(checkBox);
        return terminalTypeBox;
    }
    // 版本特色
    protected getVersionFeature(): HTMLElement {
        const nameTip = this.getTipEle('版本特色：');
        const versionFeatureBox = this.getDivofFlex();
        const checkBox = this.getCheckBoxEle({
            list:transformCheckbox(this.TypeList.characteristic,'characteristic')
        });
        this.setStyle(versionFeatureBox, 'align-items:start;');
        versionFeatureBox.appendChild(nameTip);
        versionFeatureBox.appendChild(checkBox);
        return versionFeatureBox;
    }
    // 其他标签
    protected getOtherTag(): HTMLElement {
        const nameTip = this.getTipEle('其他标签：');
        const otherTagBox = this.getDivofFlex();
        const checkBox = this.getCheckBoxEle({
            list:transformCheckbox(this.TypeList.others,'others')
        });
        this.setStyle(otherTagBox, 'align-items:start;');
        otherTagBox.appendChild(nameTip);
        otherTagBox.appendChild(checkBox);
        return otherTagBox;
    }
    // 表单区
    public getForm(): HTMLElement {
        const formContent: HTMLElement = this.createDiv();
        const formContentStyle: string = `
            width:100%;
            background:#F4F4F4;
            border-radius:4px;
            border:1px solid rgba(203,203,203,1);
            box-sizing:border-box;
            padding:20px;
        `;
        this.setStyle(formContent, formContentStyle);
        const versionName: HTMLElement = this.getVersionName();
        this.setStyle(versionName, 'margin-bottom:10px;');
        const jobNumber: HTMLElement = this.getJobNumEle();
        this.setStyle(jobNumber, 'margin-bottom:10px;');
        const versionType: HTMLElement = this.getVersionType();
        this.setStyle(versionType, 'margin-bottom:10px;');
        const terminalType = this.getTerminalType();
        this.setStyle(terminalType, 'margin-bottom:10px;');
        const versionFeature: HTMLElement = this.getVersionFeature();
        this.setStyle(versionFeature, 'margin-bottom:10px;');
        const otherTag: HTMLElement = this.getOtherTag();
        formContent.appendChild(versionName);
        formContent.appendChild(jobNumber);
        formContent.appendChild(versionType);
        formContent.appendChild(terminalType);
        formContent.appendChild(versionFeature);
        formContent.appendChild(otherTag);
        return formContent;
    }
}

export default new Form();